<template>
	<vk-data-drawer
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		:close-on-click-modal="true"
		center
		@open="onOpen"
		@closed="onClose"
	>
		<view v-if="orderInfo && orderInfo._id">
			<view style="max-height:calc(100vh - 100px - 180px);overflow-y: auto;">
				<el-table
					:show-header="false"
					:data="tableData"
					:span-method="objectSpanMethod"
					border
					:cell-style="columnStyle"
					style="width: 100%; margin-top: 0px;margin-bottom:10px; border: 1px solid #e8e8e8; border-bottom: 0; "
				>
					<el-table-column width="180" prop="title1"></el-table-column>
					<el-table-column prop="value1">
						<template slot-scope="scope">
							<view
								v-if="scope.row.title1 === '订单购买者信息'"
								style="display: flex;height: 40px;line-height: 40px;"
							>
								<el-image
									:src="orderInfo.buyer_info.avatar"
									style="width: 40px;height: 40px;border-radius: 50px;"
									:preview-src-list="[orderInfo.buyer_info.avatar]"
								></el-image>
								<view style="margin-left: 20px;">
									{{ orderInfo.buyer_info.nickname + "（" + orderInfo.user_id + "）" }}
								</view>
							</view>

							<view v-else-if="scope.row.title1 === '状态'">
								<el-tag type="success" effect="dark" size="medium" style="margin-right: 10px;">{{ statusFn(scope.row.value1) }}</el-tag>
								<el-tag type="success" effect="dark" size="medium" v-if="orderInfo.pay_type === 'wxpay'">微信</el-tag>
								<el-tag type="primary" effect="dark" size="medium" v-else-if="orderInfo.pay_type === 'alipay'">支付宝</el-tag>
								<el-tag type="warning" effect="dark" size="medium" v-else-if="orderInfo.pay_type === 'balance'">账户余额</el-tag>
								<el-tag type="info" effect="dark" size="medium" v-else-if="orderInfo.pay_type === 'offline'">线下支付</el-tag>
								<el-tag type="info" effect="dark" size="medium" v-else-if="orderInfo.pay_type === 'none'">无需支付</el-tag>
							</view>

							<view v-else-if="scope.row.title1 === '快递信息'">
								<view v-if="orderInfo.express_no || orderInfo.express_name">
									{{ orderInfo.express_no }}({{ orderInfo.express_name }})
								</view>
								<view v-else>暂无</view>
							</view>

							<view v-else-if="scope.row.title1 === '收货信息'">
								<view v-if="orderInfo.express_info.formatted_address || orderInfo.express_info.receiver_mobile || orderInfo.express_info.receiver_name">
									<text>{{ orderInfo.express_info.formatted_address }}</text>
									<text style="margin-left: 6px;">{{ orderInfo.express_info.receiver_mobile }}</text>
									<text style="margin-left: 6px;">{{ orderInfo.express_info.receiver_name }}</text>
									<text style="margin-left: 6px;text-decoration: underline;color: #409eff;cursor: pointer;" @click="copyAddress(orderInfo.express_info)">复制</text>
								</view>
								<view v-else>暂无</view>
							</view>

							<view v-else-if="scope.row.title1 === '发货人信息'">
								<view v-if="orderInfo.express_info.send_name || orderInfo.express_info.send_mobile">
									{{ orderInfo.express_info.send_name }}( {{ orderInfo.express_info.send_mobile }} )
								</view>
								<view v-else>暂无</view>
							</view>

							<view v-else-if="scope.row.title1 === '优惠信息'">
								<text
									style="display: inline-block;margin-right:20px"
									v-if="orderInfo.discount_info.vip_discount_amount"
								>
									会员优惠：{{ $fn.priceFilter(orderInfo.discount_info.vip_discount_amount) }}
								</text>
								<text
									style="display: inline-block;margin-right:20px"
									v-if="orderInfo.discount_info.integral_discount_amount"
								>
									积分抵扣：{{ $fn.priceFilter(orderInfo.discount_info.integral_discount_amount) }}
								</text>
							</view>

							<view v-else-if="scope.row.title1 === '运费'">
								<text>{{ vk.pubfn.priceFilter(orderInfo.amount_info.express_amount) }}</text>
								<text v-if="orderInfo.amount_info.original_express_amount !== orderInfo.amount_info.express_amount" style="font-size: 12px;">（会员优惠至：{{ vk.pubfn.priceFilter(orderInfo.amount_info.original_express_amount) }} - {{ vk.pubfn.priceFilter(orderInfo.amount_info.original_express_amount - orderInfo.amount_info.express_amount) }} = {{ vk.pubfn.priceFilter(orderInfo.amount_info.express_amount) }}）</text>
							</view>

							<view v-else :style="scope.row.style1">{{ scope.row.value1 || "--" }}</view>
						</template>
					</el-table-column>

					<el-table-column width="180" prop="title2"></el-table-column>

					<el-table-column prop="value2">
						<template slot-scope="scope">
							<view :style="scope.row.style2">{{ scope.row.value2 || "--" }}</view>
						</template>
					</el-table-column>
				</el-table>
			</view>
			<view>
				<el-table
					:data="orderInfo.goods_sku_list"
					:cell-style="{ 'text-align': 'center' }"
					:header-cell-style="{ 'text-align': 'center' }"
					border
					style="width: 100%;"
				>
					<el-table-column
						prop="image"
						label="商品图片"
						width="80"
					>
						<template slot-scope="scope">
							<el-image :src="scope.row.image" style="width: 40px;" :preview-src-list="[scope.row.image]"></el-image>
						</template>
					</el-table-column>
					<el-table-column
						prop="goods_name"
						label="商品名称"
						min-width="250"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<view><el-tag type="danger" size="small" v-if="orderInfo.order_type == 1" style="margin-right: 6px;">卡券</el-tag><text>{{ scope.row.goods_name }}</text></view>
						</template>
					</el-table-column>
					<el-table-column prop="sku_name" label="SKU名称" min-width="140"></el-table-column>
					<el-table-column prop="real_price" label="单价（实付）" width="120">
						<template slot-scope="scope">
							<view>{{ $fn.priceFilter(scope.row.real_price) }}</view>
						</template>
					</el-table-column>
					<el-table-column prop="buy_num" label="购买数量" width="80"></el-table-column>
					<el-table-column prop="should_payment_amount" label="实付金额" width="120">
						<template slot-scope="scope">
							<view>{{ $fn.priceFilter(scope.row.should_payment_amount) }}</view>
						</template>
					</el-table-column>


					<!-- <el-table-column prop="total_discount" label="合计优惠" width="120">
						<template slot-scope="scope">
							<view>{{ $fn.priceFilter(scope.row.total_discount) }}</view>
						</template>
					</el-table-column> -->
					<el-table-column prop="refund_num" label="退款数量" width="120">
						<template slot-scope="scope">
							<view>{{ scope.row.refund_num }}</view>
						</template>
					</el-table-column>

					<el-table-column prop="refund_amount" label="退款金额" width="120">
						<template slot-scope="scope">
							<view>{{ $fn.priceFilter(scope.row.refund_amount) }}</view>
						</template>
					</el-table-column>

					<el-table-column prop="verify_num" label="已核销数量" width="130" v-if="orderInfo.order_type == 1">
						<template slot-scope="scope">
							<text>{{ scope.row.verify_num }}</text>
							<el-tag type="danger" size="small" v-if="scope.row.buy_num - scope.row.refund_num === scope.row.verify_num" style="margin-left: 6px;">全核销完</el-tag>
						</template>
					</el-table-column>

					<!-- <el-table-column prop="goods_id" label="商品ID" width="180"></el-table-column>
					<el-table-column prop="_id" label="商品规格ID" width="180"></el-table-column> -->
				</el-table>
			</view>
		</view>
		<template v-slot:footer>
			<el-button
				:loading="page.loading"
				type="primary"
				size="medium"
				style="width: 80px;"
				@click="close"
			>
				{{ page.submitText }}
			</el-button>
		</template>
	</vk-data-drawer>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
var statusObj = vk.getVuex("$app.config.maill.order.status");
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: "",
					options: ""
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			page: {
				title: "订单详情",
				submitText: "关 闭",
				top: "2vh",
				width: "1200px",
				loading: false
			},
			orderInfo: {}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that._input(value);
		},
		_input(value) {
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { value = {} } = that;
			let { item } = value;
			that.orderInfo = vk.pubfn.copyObject(item);
		},
		// 监听 - 页面关闭
		onClose() {},
		// 打开页面
		open() {
			let { value } = that;
			value.show = true;
			that._input(value);
		},
		// 关闭页面
		close() {
			let { value } = that;
			value.show = false;
			that._input(value);
		},
		columnStyle({ row, column, rowIndex, columnIndex }) {
			if (columnIndex === 0 || columnIndex === 2 || columnIndex === 4) {
				//第三第四列的背景色就改变了2和3都是列数的下标
				return "background:#f8f8f8;text-align:center";
			} else {
				return "background:#ffffff;text-align:center";
			}
		},
		// 和并列
		objectSpanMethod({ row, column, rowIndex, columnIndex }) {
			// 打印出的数据就是表格当前行的数据,当前列的数据,索引
			if ([6, 7, 8, 9, 10, 11, 12].indexOf(rowIndex) > -1) {
				// 合并第二行
				if (columnIndex === 1) {
					// 从第二列开始
					return [1, 3];
				} else if (columnIndex === 2 || columnIndex === 3) {
					return [0, 0];
				}
			}
		},
		// 订单状态解析
		statusFn() {
			return statusObj[this.orderInfo.status];
		},
		// 复制地址
		copyAddress(address){
			let text = `${address.formatted_address} ${address.receiver_mobile} ${address.receiver_name}`;
			uni.setClipboardData({
				data: text,
				success: () => {
					vk.toast('地址复制成功');
				}
			});
		}
	},
	watch: {

	},
	// 计算属性
	computed: {
		tableData() {
			let that = this;
			let { vk } = that;
			let orderInfo = that.orderInfo;
			return [
				{
					title1: "订单购买者信息",
					value1: orderInfo.user_avatar || "--",
					title2: "订单id",
					value2: orderInfo._id || "--"
				},
				{
					title1: "状态",
					value1: orderInfo.status || "暂无",
					title2: "订单号",
					value2: orderInfo.order_no || "--"
				},
				{
					title1: "订单原价",
					value1: vk.pubfn.priceFilter(orderInfo.amount_info.total_amount),
					title2: "商品原价",
					value2: vk.pubfn.priceFilter(orderInfo.amount_info.goods_amount)
				},
				{
					title1: "运费",
					value1: vk.pubfn.priceFilter(orderInfo.amount_info.express_amount),
					title2: "合计优惠",
					value2: vk.pubfn.priceFilter(orderInfo.discount_info.total_discount)
				},

				{
					title1: "订单应付",
					value1: vk.pubfn.priceFilter(orderInfo.amount_info.should_payment_amount),
					title2: "商品折扣",
					value2: vk.pubfn.discountFilter(orderInfo.discount_info.real_discount)
				},

				{
					title1: "使用余额",
					value1: vk.pubfn.priceFilter(orderInfo.amount_info.used_balance_amount),
					title2: "使用现金",
					value2: vk.pubfn.priceFilter(orderInfo.amount_info.used_cash_amount)
				},

				{
					title1: "买家备注",
					value1: orderInfo.buyer_remark || "暂无",
					title2: "占位符",
					value2: "占位符"
				},

				{
					title1: "商家备注信息",
					value1: orderInfo.flag_content || "暂无",
					title2: "占位符",
					value2: "占位符"
				},

				{
					title1: "收货信息",
					value1: orderInfo.express_info ? orderInfo.express_info.formatted_address : "--",
					title2: "占位符",
					value2: "占位符"
				},

				{
					title1: "快递信息",
					value1: orderInfo.express_info ? orderInfo.express_info.express_no : "--",
					title2: "占位符",
					value2: "占位符"
				},


				{
					title1: "发货人信息",
					value1: orderInfo.express_info ? orderInfo.express_info.send_mobile : "--",
					title2: "占位符",
					value2: "占位符"
				},
				{
					title1: "优惠信息",
					value1: "占位符",
					title2: "占位符",
					value2: "占位符"
				},
				{
					title1: "订单重量",
					value1: orderInfo.weight + " KG",
					title2: "",
					value2: ""
				}
			];
		}
	}
};
</script>

<style lang="scss" scoped></style>
